<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>22.bind原来是这么用的</title>
</head>

<body>
  
  <button>后盾人</button>
  <script>
    //bind()是将函数绑定到某个对象，比如 a.bind(hd) 可以理解为将 a 函数绑定到 hd 对象上即 hd.a()。
    // 功能基本上和call是相似的，但是不能立即执行
    function show () {
      console.log(this.name);
    }
    //show.bind({name:"hdcms"});// 不会立即执行，想立即执行需要加()
    show.call({ name: "hdcms" });// hdcms
    show.bind({ name: "hdcms" })();// hdcms

    // bind 是复制函数行为
    let a = function () { };
    let b = a;
    console.log(a === b); //true
    //bind是新复制函数
    let c = a.bind();
    console.log(a == c); //false

    // bind 不是立刻执行的，所以可以不立即传参数
    function hd (a, b) {
      console.log(this.f, a, b);
      return this.f + a + b;
    }

    //使用bind会生成新函数,此时 a 已经被复制成3了，后面再复制只能复制b了
    let newFunc = hd.bind({ f: 1 }, 3);

    //1+3+2 参数2赋值给b即 a=3,b=2（在调用bind的时候a已经赋值了）
    console.log(newFunc(2));
    document.querySelector("button").addEventListener(
      "click",
      function (event) {
        //利用 bind 不会立即执行的特性将this指向 新建的对象
        console.log(event.target.innerHTML + this.url);
      }.bind({ url: "houdunren.com" })
    );
  </script>
</body>

</html>